<template>
  <div class="loadFail" :style="{ height }">
    <image class="image" mode="widthFix" :src="src" alt="加载失败" />
    <div class="p">{{ text }}</div>
    <div class="btn" v-if="showBtn" :style="{ background: themes.color }" @click="$emit('click')">{{ btnText }}</div>
  </div>
</template>

<script>
export default {
  name: "loadFail",
  props: {
    type: {
      type: String,
      default: "1", //1=橙色；2=蓝色
    },
    text: {
      type: String,
      default: "网络不给力，请重试~",
    },
    btnText: {
      type: String,
      default: "重新加载",
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    src: {
      type: String,
      default: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/46_1681655775359949578.sKfLa5STffEBf7a14584cdba8114c8549f423ed03744.png",
    },
    height: {
      type: String,
      default: "365px",
    },
  },
  data() {
    return {};
  },
  computed: {
    themes() {
      switch (this.type) {
        case "2":
          return {
            backgroundColor: "linear-gradient(180deg, #FFFFFF 0%, #D5EBFF 100%);",
            backgroundImage: "/static/images/common/isTop2.png",
            color: "#2D9DFD",
          };
          break;
        default:
          return {
            backgroundColor: "linear-gradient(180deg, #ffffff 0%, #ffe7d3 100%)",
            backgroundImage: "/static/images/common/isTop.png",
            color: "#ff8822",
          };
      }
    },
  },
  methods: {},
  watch: {},
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.loadFail {
  padding-top: 50px;
  // padding-bottom: 80px;
  .image {
    width: 180px;
    margin: 0px auto 20px;
    display: block;
  }
  .p {
    width: 100%;
    text-align: center;
    color: rgb(146, 136, 136);
  }
  .btn {
    width: 76px;
    height: 27px;
    margin: 20px auto;
    color: #fff;
    border-radius: $uni-border-radius-lg;
    font-size: $uni-font-size-base;
    text-align: center;
    line-height: 27px;
  }
}
</style>
